<template>
  <div id="dirCounts" style="width: 100%; height: 240px"></div>
</template>
<script>
import Api from "@/api/index";
import echartsMixin from "@/mixins/echartsMixin";

export default {
  name: "Lifeblood",
  mixins: [echartsMixin],
  data() {
    return {
      dirCounts: [],
      inited: false,
      chart: null,
    };
  },
  mounted() {
    this.breadcrumbChanged();
    setInterval(() => {
      this.breadcrumbChanged();
    }, 300000);
    if (!this.inited) {
      this.chart = this.$echarts.init(document.getElementById("dirCounts"));
      this.inited = true;
    }
  },
  methods: {
    boolString(val) {
      return val ? "是" : "否";
    },
    breadcrumbChanged() {
      this.loading = true;
      Api.stockInfo
        .direction()
        .then((res) => {
          if (res.code === 200) {
            this.dirCounts = res.data;

            let xAxisData = [];
            let volumeData = [];
            this.dirCounts.reverse();
            this.dirCounts.forEach((item) => {
              xAxisData.push(item.day);
              volumeData.push(item.downRatio);
            });
            this.chart.setOption({
              title: {
                text: "风向标：从上向下反转逢低进场，从下向上反转逢高离场，切记勿追高！",
                left: "center",
              },
              grid: {
                left: "30px",
                right: "10px",
                top: "40px",
                bottom: "20px",
              },
              visualMap: [
                {
                  show: false,
                  type: "continuous",
                  seriesIndex: 0,
                  min: 40,
                  max: 50,
                  inRange: { color: ["red", "green"] },
                },
              ],
              tooltip: {
                trigger: "axis",
              },
              xAxis: {
                type: "category",
                data: xAxisData,
              },
              yAxis: {
                type: "value",
                min: 0,
                max: 80,
              },
              series: [
                {
                  name: "跌率(%)",
                  showSymbol: false,
                  data: volumeData,
                  smooth: true,
                  type: "line",
                  lineStyle: {
                    shadowColor: "rgba(0,0,0, 0.159)",
                    shadowBlur: 10,
                    shadowOffsetY: 20,
                  },
                },
              ],
            });
          }
          this.loading = false;
        })
        .catch((e) => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
#dirCounts {
}
</style>
